<template>
  <div>
    <div class="charts">
      <p>智能设备运营驾驶舱</p>
      <img class="info" src="../../assets/index-button.png" @click="info">
      <div class="charts-c">
        <div class="box-a">
          <div class="box1">
            <div class="charts-top">
              <div class="charts-title"><span>>></span>设备可动率</div>
              <div class="PM"><e-charts style="width: 28vw;margin-top: 1vh" autoresize :option="option6" /></div>
            </div>
          </div>
          <div class="box2">
            <div class="chats-b">
              <div class="charts-title"><span>>></span>MTBF</div>
              <div class="chart-a"><e-charts style="height: 26vh;margin-top: 2vh;width: 28vw" autoresize :option="option1" /></div>
            </div>
            <div class="chats-b">
              <div class="charts-title2"><span>>></span>MTTR</div>
              <div class="chart-a"><e-charts style="height: 27vh;margin-top: 0.5vh;width: 28vw" autoresize :option="option2" /></div>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box3">
            <div class="chats-a">
              <div class="m-title"><h1>当日工厂完成率</h1></div>
              <div class="mid">
                <div class="mid-top">
                  <div class="chart-a"><e-charts autoresize style="height: 22vh;margin-left: 0.5vw;width: 105%" :option="option20" /></div>
                  <div class="chart-a"><e-charts autoresize style="height: 24vh;margin-left: 0.5vw;width: 105%" :option="option21" /></div>
                  <div class="chart-a"><e-charts autoresize style="height: 22vh;margin-left: 0.5vw;width: 105%" :option="option22" /></div>
                </div>
                <div class="mid-bottom">
                  <div class="chart-a"><e-charts autoresize style="height: 22vh;padding-left: 5vw;width: 100%" :option="option23" /></div>
                  <div class="chart-a"><e-charts autoresize style="height: 22vh;padding-right: 3vw;width: 100%" :option="option24" /></div>
                </div>
              </div>
            </div>
          </div>
          <div class="box4">
            <div class="chats-a">
              <div class="charts-title"><span>>></span>自主维护、专业维护</div>
              <div class="box-flex">
                <div class="chart-a"><e-charts style="height: 29vh;width: 24vw;padding-left: 1vw" autoresize :option="option7" /></div>
                <div class="chart-a"><e-charts style="height: 29vh;width: 24vw;padding-right: 1vw" autoresize :option="option8" /></div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-a box-r">
          <div class="box6">
            <div class="chats-a">
              <div class="charts-title"><span>>></span>故障数据统计</div>
              <div class="PM"><e-charts style="width: 110%;height: 27vh;margin-top: 2vh" autoresize :option="option14" /></div>
            </div>
          </div>
          <div class="box5">
            <div class="chats-b">
              <div class="charts-title"><span>>></span>当日各车间故障数据</div>
              <div class="chart-a"><e-charts style="height: 28vh;width: 98%;margin-left: 1vw" autoresize :option="option11" /></div>
            </div>
            <div class="chats-b">
              <div class="charts-title2"><span>>></span>当月各车间故障数据 </div>
              <div class="chart-a"><e-charts style="height: 27vh;width: 98%;margin-left: 1vw" autoresize :option="option12" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 60vh" class="dashboard-container dashboard-h" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import API from '@/api/charts'
import screenfull from 'screenfull'
export default {
  name: 'Dashboard',
  data() {
    return {
      currentRole: 'adminDashboard',
      list4: [],
      list2: [],
      list: [],
      list1: [],
      chart5: [],
      OEE: [],
      MTBF: [],
      MTTR: [],
      cm1: [],
      cm: [],
      workshop1: [],
      workshop2: [],
      workshop3: [],
      workshop4: [],
      workshop5: [],
      chart6: [],
      chart7: [],
      chart8: [],
      chart1: {
        times: [],
        minute: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    option1() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: [{ name: '工厂' }, { name: '指标' }],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          data: this.MTBF.workshop
        },
        yAxis: {
          name: '分钟',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          nameTextStyle: {
            padding: [0, 20, 0, 0],
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          }
        },
        grid: {
          right: '20%'
        },
        series: [
          {
            name: '工厂',
            type: 'bar',
            barWidth: 18,
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: this.MTBF.mtbf
          },
          {
            name: '指标',
            type: 'line',
            data: this.MTBF.target
          }
        ]
      }
    },
    option2() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: [{ name: '工厂' }, { name: '指标' }],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          data: this.MTTR.workshop
        },
        yAxis: {
          name: '分钟',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          nameTextStyle: {
            padding: [0, 20, 0, 0],
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          }
        },
        grid: {
          right: '20%'
        },
        series: [
          {
            name: '工厂',
            type: 'bar',
            barWidth: 18,
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: this.MTTR.mttr
          },
          {
            name: '指标',
            type: 'line',
            data: this.MTTR.target
          }
        ]
      }
    },
    option20() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '冲压',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop1
          }
        ]
      }
    },
    option21() {
      return {
        color: ['#ffff99', '#fe441b', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '工厂',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop5
          }
        ]
      }
    },
    option22() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '车身',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop2
          }
        ]
      }
    },
    option23() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '涂装',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop3
          }
        ]
      }
    },
    option24() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '总装',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop4
          }
        ]
      }
    },
    option6() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: this.OEE.month
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（%）',
            min: 0,
            max: 100,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（%）',
            min: 0,
            max: 100,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            barWidth: 18,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: this.OEE.factory
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: this.OEE.target
          }
        ]
      }
    },
    option7() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.chart6
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（%）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option8() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.chart7
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（%）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option11() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.cm
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          name: '%',
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option12() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.cm1
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          name: '%',
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option14() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        legend: {
          data: ['次数', '时间'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            data: this.chart8.factory
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '次数',
            min: 0,
            max: 100,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'right',
            offset: 80,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            name: '时间',
            min: 0,
            max: 120,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
              lineStyle: {
                color: '#00deff'
              }
            }
          }
        ],
        series: [
          {
            name: '时间',
            type: 'bar',
            barWidth: 18,
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: this.chart8.time
          },
          {
            name: '次数',
            type: 'line',
            data: this.chart8.times
          }
        ]
      }
    }
  },
  created() {
    this.index()
  },
  methods: {
    index() {
      API.chart2({ plan_category: 2 }).then(res => {
        this.list2 = res.data
      }).catch()
      API.chart2({ plan_category: 1 }).then(res => {
        this.list1 = res.data
      })
      API.chart4().then(res => {
        this.chart5 = res.data
      })
      API.chart3().then(res => {
        this.chart1 = res.data
      })
      API.echartsOEE().then(res => {
        this.OEE = res.data
      })
      API.echartsMTBF().then(res => {
        this.MTBF = res.data
      })
      API.echartsMTTR().then(res => {
        this.MTTR = res.data
      })
      API.chart5({ workshop: 1 }).then(res => {
        this.workshop1 = res.data
      })
      API.chart5({ workshop: 2 }).then(res => {
        this.workshop2 = res.data
      })
      API.chart5({ workshop: 3 }).then(res => {
        this.workshop3 = res.data
      })
      API.chart5({ workshop: 4 }).then(res => {
        this.workshop4 = res.data
      })
      API.chart5().then(res => {
        this.workshop5 = res.data
      })
      API.chart6().then(res => {
        this.chart6 = res.data
      })
      API.chart7().then(res => {
        this.chart7 = res.data
      })
      API.chart8().then(res => {
        this.chart8 = res.data
      })
      API.cm().then(res => {
        this.cm = res.data
      })
      API.cm({ period: 'month' }).then(res => {
        this.cm1 = res.data
      })
    },
    info() {
      screenfull.toggle()
      this.$router.push('/index/index')
    }
  }
}
</script>
<style scoped>
  .charts{
    width: 100%;
    height: 100%;
    background-image: url("../../assets/charts-bg.jpg");
    background-size: cover;
    background-repeat:no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
  }
  .charts p{
    color: #00deff;
    font-weight: 700;
    font-size: 32px;
    text-align: center;
  }
  .charts-c{
    margin-top: -30px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }
  .dashboard-h .dashboard-editor-container{
    height: 100px;
  }
  .box{
    display: flex;
    width: 46%;
    height: 88%;
    flex-direction:column;
    justify-content: space-between;
  }
  .box-a{
    display: flex;
    width: 25%;
    height: 88%;
    flex-direction:column;
    justify-content: space-between;
  }
  .box1{
    width: 100%;
    height: 30% ;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    overflow: hidden;
  }
  .box2{
    width: 100%;
    height: 68%;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    display: flex;
    overflow: hidden;
    flex-direction:column;
  }
  .box3{
    width: 100%;
    height: 66% ;
    background-image: url("../../assets/box-m.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    overflow: hidden;
  }
  .box4{
    width: 100%;
    height: 32%;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
  }
  .box5{
    width: 100%;
    height: 66%;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    flex-direction:column;
    justify-content: space-evenly;
  }
  .box6{
    width: 100%;
    height: 32% ;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
  }
  .PM{
    width: 100%;
    height: 100%;
  }
  .chart-a{
    width: 100%;
    height: 100%;
  }
  .chats-a{
    width: 100%;
    height: 100%;
  }
  .charts-top{
    width: 100%;
    height: 100%;
  }
  .charts-title{
    color: #00deff;
    margin-top: 8px;
    padding-top: 5px;
    margin-left: 10px;
  }
  .charts-title span{
    margin-right: 10px;
  }
  .charts-title2{
    color: #00deff;
    margin-left: 10px;
  }
  .charts-title2 span{
    margin-right: 10px;
  }
  .m-title h1{
    color: #fff;
    text-align: center;
    font-size: 24px;
    padding-top: 40px;
  }
  .chats-a .m-title span{
    display: inline-block;
    padding: 4px 8px ;
    background-image: linear-gradient(#0ca1bd, #0ccfb1);
    margin-right: 8px;
  }
  .chats-a .m-title b{
    font-size: 18px;
    font-weight: normal;
  }
  .info{
    position: fixed;
    left:1vw;
    top: 20px;
    cursor:pointer;
  }
  .box-flex{
    display: flex;
    justify-content: space-between;
  }
  .mid-top{
    display: flex;
  }
  .mid-bottom{
    display: flex;
  }
</style>
<style>
  .handle-button{
    display: none;

  }
</style>
